<template>
    <div class="body">
        <div class="left-class">
            <!--全部-->
            <div>
                <div style="text-align: left;margin: 30px 0px 0px 30px">
                    <button style="font-size: 15px;" disabled>全部</button>
                </div>
            </div>
            <el-divider></el-divider>
            <!--分类-->
            <div>
                <div style="text-align: left;margin: 30px 0px 20px 30px">
                    <button style="font-size: 15px;" disabled>分类</button>
                </div>
                <div style="height: 130px" class="aaac">
                    <button :class="active===-1?'changeSelectAll':'dies'" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px" @click="cls(null,null)">全部</button>
                    <button :class="active === index?'changeSelectAll':'dies'" @click="cls(i.id,index)"
                            v-for="(i,index) in classify" :key="index" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px">
                        {{i.title}}
                    </button>
                </div>
            </div>
            <el-divider></el-divider>
            <!--状态-->
            <div>
                <div style="text-align: left;margin: 30px 0px 30px 30px">
                    <button style="font-size: 15px;" disabled>状态</button>
                </div>
                <div style="height: 40px" class="aaab">
                    <button :class="acc===-1?'changeSelectAll':'dies'" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px"  @click="AllFL(null)">全部</button>
                    <button :class="acc===0?'changeSelectAll':'dies'" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px" @click="AllFL(0)">连载</button>
                    <button :class="acc===1?'changeSelectAll':'dies'" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px" @click="AllFL(1)">完本</button>
                </div>
            </div>
        </div>

        <div class="right-book">
            <div style="text-align: left;margin: 25px 0px 25px 25px" class="aaad">
                <button :class="abb===-1?'changeSelectAll':'dies'" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px" @click="queryList(null)">综合</button>
                <button :class="abb===1?'changeSelectAll':'dies'"  style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px" @click="queryWord(1)">字数</button>
                <button :class="abb===2?'changeSelectAll':'dies'" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px" @click="queryHits(2)">点击</button>
                <button :class="abb===3?'changeSelectAll':'dies'" style="width: 70px;height: 35px;font-size: 15px;margin-left: 5px;margin-top: 1px" @click="queryTime(3)">时间</button>
            </div>
            <el-divider></el-divider>
            <div v-if="newList.list.length===0">
                <p>暂无图书</p>
            </div>

            <div v-else style="height:680px">
                <!--neirong-->
                <div class="block" v-for="(i,index) in newList.list" :key="index" style="margin-left: 20px;">
                    <div style="padding-left: 10px;float: left">
                        <router-link :to="{path: '/workinfo', query: {id:i.id,tag:i.tag}}">
                            <el-image :src="require('../img/'+i.pic)" style="width: 120px;height: 150px;"/>
                        </router-link>
                    </div>
                    <div style="float:left;">
                        <div style="height: 30px"><span class="demonstration" v-text="i.title">默认</span></div>
                        <div style="height: 100px;width: 190px;"><span class="demonstration">{{i.content}}</span></div>
                        <div style="height: 30px;color: red"><span class="demonstration" v-text="i.author">默认</span>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;float: left;margin-top: 100px">
                        <el-button @click="firstPage">首页</el-button>
                        <el-button @click="prePage">上一页</el-button>
                        <el-button @click="nextPage">下一页</el-button>
                        <el-button @click="lastPage">尾页</el-button>
                        <span>当前共{{newList.pages}}页</span>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'AllClass',
        data() {
            return {
                active:-1,
                acc:-1,
                abb:-1,
                pageNum:null,
                pageSize:9,
                cid: this.$route.query.category,
                sid: this.$route.query.serialize,
                word: null,
                hits: this.$route.query.hits,
                create_time: null,
                showList: true,
                title: this.$route.query.input,
                bookList: {},
                num: 1,
                newList: {},
                classify:null,
                input: '',
                book_category: [
                    {title: ''}
                ],
            }
        },
        created() {
            this.$http.post('cate/findList').then(response => {
                this.classify = response.data
            })
            this.$http.post('/nove/findClass', {
                title: this.title,
                category: this.cid,
                hits: this.hits,
                serialize: this.sid,
            }).then(response => {
                this.newList = response.data
            })
        },
        methods: {
            firstPage(){
                this.pageNum=1;
                this.pageSize=this.newList.pageSize;
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize)
            },
            lastPage() {
                this.pageNum=this.newList.pages;
                this.pageSize=this.newList.pageSize;
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize)
            },
            prePage(){
                if(this.newList.hasPreviousPage){
                    this.pageNum=this.newList.prePage;
                    this.pageSize=this.newList.pageSize;
                    this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize)
                }else{
                    this.$notify({
                        title: '失败',
                        message: '亲爱的小主.已经没有额外图书哦!',
                        type: 'warning'
                    });
                }
            },
            nextPage(){
                if(this.newList.hasNextPage){
                    this.pageNum=this.newList.nextPage;
                    this.pageSize=this.newList.pageSize;
                    this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize)
                }else{
                    this.$notify({
                        title: '失败',
                        message: '亲爱的小主.已经没有额外图书哦!',
                        type: 'warning'
                    });
                }

            },
            c(cid, sid, word, hits, create_time,title,pageNum,pageSize) {
                this.$http.post('/nove/findClass', {
                    category: cid,
                    serialize: sid,
                    word: word,
                    hits: hits,
                    create_time: create_time,
                    title:title,
                    pageNum:pageNum,
                    pageSize:pageSize
                }).then(response => {
                    this.num = 2;
                    console.log(response.data);
                    this.newList = response.data
                })
            },
            cls(id,index) {
                this.cid = id;
                if(index!=null){
                    this.active=index;
                }else{
                    this.active=-1;
                }
                this.pageNum=this.newList.pageNum
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize);
            },
            AllFL(sid) {
                this.sid = sid;
                if(sid!==null){
                    this.acc=sid;
                }else{
                    this.acc=-1;
                }
                this.pageNum=this.newList.pageNum
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize);
            },
            queryWord(id) {
                this.word = "123";
                this.hits = null;
                this.create_time = null;
                if(id!==null){
                    this.abb=id;
                }else{
                    this.add=-1;
                }
                this.pageNum=this.newList.pageNum
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize);
            },
            queryHits(id) {
                this.hits = "123";
                this.word = null;
                this.create_time = null;
                if(id!==null){
                    this.abb=id;
                }else{
                    this.add=-1;
                }
                this.pageNum=this.newList.pageNum
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize);
            },
            queryTime(id) {
                this.create_time = "123";
                this.word=null;
                this.hits=null;
                if(id!==null){
                    this.abb=id;
                }else{
                    this.add=-1;
                }
                this.pageNum=this.newList.pageNum
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize);
            },
            queryList(id) {
                this.create_time = null;
                this.hits=null;
                this.word=null;
                if(id===null){
                    this.abb=-1;
                }
                this.pageNum=this.newList.pageNum
                this.c(this.cid, this.sid, this.word, this.hits, this.create_time,this.title,this.pageNum,this.pageSize);
            }
        }
    }
</script>

<style>
    .body {
        background-color: honeydew;
    }
    .aaac .changeSelectAll{
        background-color: red;
    }
    .aaac .dies{
        background-color: white;
    }
    .aaab .changeSelectAll{
        background-color: red;
    }
    .aaab .dies{
        background-color: white;
    }
    .aaad .changeSelectAll{
        background-color: red;
    }
    .aaad .dies{
        background-color: white;
    }
    .left-class {
        border: 1px;
        background-color: white;
        float: left;
        margin-left: 250px;
        width: 310px;
        height: 500px;
    }

    .right-book {
        border: 1px white solid;
        background-color: white;
        margin-left: 580px;
        width: 1030px;
        height: 800px;
    }

    .btnA {
        width: 70px;
        height: 35px;
        font-size: 15px;
    }

    .btnA:hover {
        color: red;
    }
</style>

<style scoped>

</style>
